<template>
  <view class="couponListXgl" v-if="show">
    <u-sticky bgColor="#fff">
      <u-tabs :list="tabList" @click="switchTab" lineWidth="30" lineHeight="7" :lineColor="`url(`+lineBg+`) 100% 100%`" :activeStyle="{
        color: '#303133',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
    }" :inactiveStyle="{
        color: '#606266',
        transform: 'scale(1)'
    }" itemStyle="height: 44px;width: 28%;"></u-tabs>
    </u-sticky>

    <view class="coupons">
      <u-loading-icon :show="loading" />
      <view class="item" v-for="(item, index) in tableData" :key="index" @tap="toCouponDetail(item)">
        <image mode="heightFix" :src="item.imageBgUrl" :style="'opacity: '+item.opacity+';'" />
        <view v-if="item.leftNum === 0" class="over">
          已售空
        </view>
      </view>
    </view>
    <!-- 无商品显示 -->
    <view v-if="tableData.length===0" class="empty">
      <view class="img">
        <image src="https://mm.wentsoft.com/images/empty-img/coupon-empty.png" />
      </view>
      <view class="text">没有找到对应卡券，看看别的吧</view>
    </view>

    <!-- 没有更多 -->
    <u-loadmore v-if="tableData.length !== 0" :status="loadMoreStatus" color="#999" marginTop="40" height="20" lineColor="#999" dashed />

  </view>
</template>

<script>
import { xglPointCouponPage } from '@/api/api1';
import { toCoupon } from '../../utils/beanHandle.js';
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      tabList: [],//券分类
      currentTab: 1, // 选中的分类项(默认为第一个分类)
      searchTableQuery: {
        size: 10,
        current: 1
      },
      searchTableData: {
        records: [],
        total: 0, // 总数
        pages: 0 // 总页数
      },
      tableData: [],//表单数据
      loadMoreStatus: 'loadmore',
      loading: false,
      lineBg: ""
    }
  },
  created() {
    this.getSection()
  },
  computed: {
    hasLoginAndHasMallInfo() {
      return this.$store.getters.hasLoginAndHasMallInfo
    }
  },
  methods: {
    refresh() {
      this.searchTableQuery.current = 1
      this.searchTableData = {
        records: [],
        total: 0,
        pages: 0
      }
      this.tableData = []
      this.loadMoreStatus = "loadmore"
      this.getSearchList()
    },
    toCouponDetail(item) {
      if (item.sysl <= 0) return
      if (!this.hasLoginAndHasMallInfo) {
        uni.$u.route('/pages/users/login/index')
      }
      uni.$u.route('/pages/coupon/couponDetail/couponDetail', {
        item: item
      })
    },
    /**
     * 绑定触底事件
     */
    pageing() {
      if (this.searchTableQuery.current < this.searchTableData.pages) {
        this.searchTableQuery.current = this.searchTableQuery.current + 1
        this.getSearchList()
      } else {
        this.loadMoreStatus = "nomore"
      }
    },
    /**
     * 获取平台分类
     */
    getSection() {
      this.tabList = [{
        name: '购买卡券'
      }, {
        name: '领取卡券'
      }, {
        name: '兑换卡券'
      }]
      this.tabList.forEach((x, i) => {
        x.id = i + 1
      })
      this.currentTab = 1
    },
    /**
     * 获取卡券列表
     */
    getSearchList() {
      const that = this;
      that.loadMoreStatus = 'loading'
      that.loading = true;
      if (that.currentTab === 1) {
        that.searchTableQuery.purpose = 1
        xglPointCouponPage(that.searchTableQuery).then(res => {
          that.loading = false;
          that.handle("买", res)
        })
      } else if (that.currentTab === 2) {
        that.searchTableQuery.purpose = 2
        xglPointCouponPage(that.searchTableQuery).then(res => {
          that.loading = false;
          that.handle("领", res)
        })
      } else if (that.currentTab === 3) {
        that.searchTableQuery.purpose = 3
        xglPointCouponPage(that.searchTableQuery).then(res => {
          that.loading = false;
          that.handle("兑换", res)
        })
      }
    },
    handle(desc, res) {
      this.searchTableData = {
        records: res.data.records,
        total: res.data.total, // 总数
        pages: res.data.pages // 总页数
      }
      let resList = res.data.records.map(data => {
        data.opacity = data.leftNum > 0 ? 1 : 0.5
        return data;
      });
      console.info("可" + desc + "券列表数据：", resList);
      this.tableData = this.tableData.concat(resList)
      if (res.data.current === res.data.pages || res.data.records.length === 0) {
        this.loadMoreStatus = 'nomore'
      }
    },
    /**
    * 切换分类
    */
    switchTab(e) {
      if (this.currentTab === e.id) {
        return
      }
      this.currentTab = e.id
      this.searchTableQuery.current = 1
      this.searchTableData = {
        records: [],
        total: 0,
        pages: 0
      }
      this.tableData = []
      this.loadMoreStatus = "loadmore"
      this.getSearchList()
    },
  }
}
</script> 
<style lang="scss" scoped>
/* 横排券列表 */
.coupons {
  @include flex-center(column);
  gap: 30rpx;
  .item {
    @include flex-center;
    width: 100%;
    height: 240rpx;
    image {
      position: absolute;
      z-index: -1;
      height: 240rpx;
    }
    .over {
      @include flex-center;

      font-weight: bold;
      background-color: #4a4040;
      color: #b3b3b3;
      width: 100rpx;
      height: 100rpx;
      border-radius: 30px;
    }
  }
}
</style>
